<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入Bootstrap CSS -->
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link rel="icon" type="image/png" href="./img/favicon.png">
</head>
<body>

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-md-3 bg-light p-3 border-right" style="min-height: 100vh;">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a href="/AiGame.html" class="nav-link">AI 博弈</a>
                </li>
                <li class="nav-item">       <!-- 添加id以便于绑定事件 -->
                    <a href="/PlaySolo.html" id="singlePlayerLink" class="nav-link">单人检验</a>
                </li>
                <li class="nav-item"><a href="/GameLobby.html" class="nav-link">加入房间</a></li>
                <li class="nav-item"><a href="/PersonalHomepage.html" class="nav-link">修改个人信息</a></li>
            </ul>
        </div>
        <div class="col-md-9 p-4">
            <header class="mb-4 text-light">
                <img src="" alt="头像" id="avatar" class="rounded-circle mb-2"
                     style="width: 150px; height: 150px;">

                <h1 class="text-muted" id="username"></h1>
                <p class="text-muted" id="email"></p>
                <p class="text-muted" id="introduction"></p>
            </header>
            <!-- 这里可以根据需要加载不同的内容或页面 -->
            <div id="content-area">
                <!-- 默认显示的内容或通过JavaScript动态加载 -->
                <p>欢迎来到象棋大战平台！请选择左侧菜单中的选项以开始。</p>
            </div>
        </div>
    </div>
</div>

<!-- 引入Axios和Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="js/axios.min.js"></script>
<script type="module">
    import {getState} from '/js/localStorages/localStorageUesrData.js';

    //初始化用户信息
    async function InitUserInformation() {

        let userData = (await getState()).count;


        document.getElementById('username').innerText = userData.username;
        document.getElementById('email').innerText = `邮箱: ${userData.email}`;
        document.getElementById('introduction').innerText = `简介: ${userData.introduction || "这个人没有写简介"}`;

        console.log(userData)

        document.getElementById('avatar').src = userData.image === "default-avatar" ? './img/default-avatar.jpg' : userData.image;
    }

    window.onload = function () {
        InitUserInformation()
    };
</script>
</body>
</html>